<template>
  <div ref="chart" style="width: 100%; height: 300px;"></div>
</template>

<script>
import * as echarts from 'echarts'
import { get } from '@/util/http.js'

export default {
  name: 'EChartsComponent',
  data () {
    return {
      echartsData: {}
    }
  },
  mounted () {
    // this.initChart()
    this.getweatherHoursData()
  },
  methods: {
    async getweatherHoursData () {
      // 24小时气象预测
      const res = await get({ url: '/weatherhour/list' })
      const weatherData = JSON.parse(res[0].json).hours.slice(0, 24)

      // 使用 map 函数提取 x 和 y 轴的数据
      const xAxisData = weatherData.map(item => item.hours) // x轴数据
      const yAxisData = weatherData.map(item => item.tem) // y轴数据

      // 根据 ECharts 的格式结构化数据
      const seriesData = {
        xAxis: {
          type: 'category',
          data: xAxisData // 使用 hours 作为x轴数据
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '温度',
          type: 'line', // 可以根据需要修改图表类型
          data: yAxisData // 使用 tem 作为y轴数据
        }]
      }
      this.initChart(seriesData)
    },
    initChart (seriesData) {
      const chartDom = this.$refs.chart
      const myChart = echarts.init(chartDom)
      const option = {
        title: {
          // text: '逐小时温度预测'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: false,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: seriesData.xAxis,
        yAxis: seriesData.yAxis,
        series: seriesData.series
        // series: [
        //   {
        //     name: '逐时温度',
        //     type: 'line',
        //     data: [1, -2, 2, 5, 3, 2, 0, 1, -2, 2, 5, 3, 2, 0],
        //     markPoint: {
        //       data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
        //     },
        //     markLine: {
        //       data: [
        //         { type: 'average', name: 'Avg' },
        //         [
        //           {
        //             symbol: 'none',
        //             x: '90%',
        //             yAxis: 'max'
        //           },
        //           {
        //             symbol: 'circle',
        //             label: {
        //               position: 'start',
        //               formatter: '最高点'
        //             },
        //             type: 'max',
        //             name: '最高点'
        //           }
        //         ]
        //       ]
        //     }
        //   }
        // ]
      }

      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
/* Add any component-specific styles here */
</style>
